<template>
  <div>
    <h3>{{ title }}</h3>
    <el-input type="text" v-model="msg" style="width:200px" :rules="{required:true,message:'不能为空',change:'blur'}"/>
    <el-button type="primary" @click="tran" size="small" style="margin-left:5px">子组件传值</el-button>
    <el-table :data="cart" border style="margin-top : 5px">
      <el-table-column type="selection"/>
      <el-table-column label="编号" prop="id" align="center"/>
      <el-table-column label="标题" prop="title" align="center"/>
      <el-table-column label="价格" prop="price" align="center"/>
      <el-table-column label="状态" prop="active" align="center"/>
      <el-table-column label="数量" prop="count" align="center"/>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button type="success" @click="handleEdit(scope.row.id)" size="small">修改</el-button>
          <el-button type="danger" @click="handleDel(scope.row.id)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<script>

export default {
  name: "Cart",
  data() {
    return {
      msg: undefined
    }
  },
  props: {
    cart: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: () => undefined
    }
  },
  methods: {
    handleEdit(id) {

    },
    handleDel(id) {

    },
    tran() {
      if (!this.msg) {
        this.$message.error('请先输入')
      } else {
        this.$emit('info', this.msg)
      }

    }
  }
}
</script>

<style scoped>

</style>
